<template>
  <view class="dy-scroll-container">
    <dy-navbar title="swiper" />
    <scroll-view class="dy-scroll" scroll-y="">
      <!-- 基础用法 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" />
        <template slot="body">
          <dy-swiper :imgs="demo1.imgs" />
        </template>
      </dy-card>
      <!-- 固定高度 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="固定高度" desc="height: 400" />
        <template slot="body">
          <dy-swiper height="400" img-mode="aspectFill" :imgs="demo2.imgs" />
        </template>
      </dy-card>
      <!-- 3d效果 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="3d效果" desc="effect3d" />
        <template slot="body">
          <dy-swiper height="400" img-mode="aspectFill" :imgs="demo2.imgs" effect3d />
        </template>
      </dy-card>
      <!-- 圆点指示器 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="圆点指示器" desc="indicator-type: dot" />
        <template slot="body">
          <dy-swiper
            height="400"
            img-mode="aspectFill"
            indicator-type="dot"
            indicator-position="bc"
            indicator-active-color="red"
            :imgs="demo2.imgs"
          />
        </template>
      </dy-card>
      <!-- 矩形指示器 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="矩形指示器" desc="indicator-type: rect" />
        <template slot="body">
          <dy-swiper
            height="400"
            img-mode="aspectFill"
            indicator-type="rect"
            indicator-position="tc"
            :imgs="demo2.imgs"
          />
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Swiper',
  data() {
    return {
      demo1: {
        imgs: [
          require('../../../../static/img/271bea8f-aece-4265-a2c7-565cf6e863be.png'),
          require('../../../../static/img/c227f889-22f4-4506-9b41-3e6a60706564.png'),
          require('../../../../static/img/23c0cf6e-1d6d-4d03-b882-bbc5c5085ec8.png')
        ]
      },
      demo2: {
        imgs: [
          require('../../../../static/img/271bea8f-aece-4265-a2c7-565cf6e863be.png'),
          require('../../../../static/img/c227f889-22f4-4506-9b41-3e6a60706564.png'),
          require('../../../../static/img/23c0cf6e-1d6d-4d03-b882-bbc5c5085ec8.png')
        ]
      }
    }
  }
}
</script>
